<template>
  <div class="app">
    <GlobalHeader :is-login="isLogin" :data="currentUser"></GlobalHeader>
    <Loader v-if="isLoading"></Loader>
    <router-view class="container"></router-view>
    <footer>
      <ul>
        <li>&copy; 2025 者也专栏</li>
      </ul>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { computed, watch } from "vue";
import GlobalHeader from "./components/GlobalHeader.vue";
import Loader from "./components/Loader.vue";
import { useGlobalStore } from "./store/global";
import { useUserStore } from "./store/user";
import createMessage from "./components/createMessage";

const userStore = useUserStore();
const isLogin = computed(() => userStore.isLogin);
const currentUser = computed(() => userStore.data);

// 统一处理 loading 和 报错信息
const globalStore = useGlobalStore();
const isLoading = computed(() => globalStore.loading);
const error = computed(() => globalStore.error);

watch(
  () => error.value.status,
  () => {
    const { status, message } = error.value;
    if (status && message) {
      createMessage(message, "error", 2000);
    }
  }
);
</script>

<style scoped>
/* ​​CSS 实现高度撑开 + 底部自动置底的方法​ */
.app {
  display: flex;
  flex-direction: column;
  /* 若是 grid 布局，仅以下2行即可 */
  /* display: grid; */
  /* grid-template-rows: auto 1fr auto; 关键：中间行自动伸缩 */
  min-height: 100vh; /* 关键：确保容器至少为视口高度 */
}

.container {
  /* 关键：内容区自动撑开 */
  flex: 1;
}

footer {
  padding: 24px 0;
  background-color: rgba(248, 249, 250);
  color: rgba(108, 117, 125);
}
</style>
